<template>
  <div class="app-container">

    <el-form :model="form" ref="form" label-width="160px" v-loading="formLoading" :rules="rules">
     <el-form-item label="题干：" prop="title" required>
         <el-input v-model="form.title"></el-input>
      </el-form-item>
      <!--Editor v-model="form.titleName" /-->
      <!--el-form-item label="选项：" prop="items" required>
        <el-form-item :label="item.prefix" :key="item.prefix"  v-for="(item,index) in form.items"  label-width="50px" class="question-item-label">
          <el-input v-model="item.prefix"  style="width:150px;" />
          <tinymce-editor ref="editor" v-model="item.content"  :disabled="disabled" @onClick="onClick" class="question-item-content-input"/>
           <el-button type="danger" size="mini" class="question-item-remove" icon="el-icon-delete" @click="questionItemRemove(index)"></el-button>
        </el-form-item>
      </el-form-item--> 
       <el-form-item label="选项：" prop="items"  required>
        <el-form-item :label="item.prefix" :key="item.prefix"  v-for="(item,index) in form.items"  label-width="50px" style="height: 180px;" class="question-item-label">
          <el-input v-model="item.prefix"  style="width:50px;" />
          <el-button  size="mini" class="question-item-remove" icon="el-icon-delete" @click="questionItemRemove(index)"></el-button>
          <Editor v-model="item.content"  class="question-item-content-input" style="height: 80px;"></Editor>
          <!--el-input v-model="item.content"   @focus="inputClick(item,'content')"  class="question-item-content-input"/-->
        </el-form-item>
      </el-form-item>
      <el-form-item label="解析：" style="padding: 0px 0px 30px 50px " prop="analyze">
        <Editor v-model="form.analyze"  />
      </el-form-item>
      <el-form-item label="分数：" prop="score" required>
        <el-input-number v-model="form.score" :precision="1" :step="1" :max="100"></el-input-number>
      </el-form-item>
      <el-form-item label="难度：" prop="difficult">
        <el-rate v-model="form.difficult" class="question-item-rate"></el-rate>
      </el-form-item>
      <el-form-item label="正确答案：" prop="correct" required>
        <el-radio-group v-model="form.correct">
          <el-radio  v-for="item in form.items"  :key="item.prefix"  :label="item.prefix">{{item.prefix}}</el-radio>
        </el-radio-group>
      </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
        <el-button type="success" @click="questionItemAdd">添加选项</el-button>
        <el-button type="success" @click="showQuestion">预览</el-button>
      </el-form-item>

    </el-form>
    <el-dialog :visible.sync="questionShow.dialog" style="width: 100%;height: 100%">
      <QuestionShow :qType="questionShow.qType" :question="questionShow.question" :qLoading="questionShow.loading"/>
    </el-dialog>
      
  </div>
</template>

<script>
import {select,edit} from "@/api/xzs/question";
import Editor from '@/components/Editor';
import QuestionShow from '../components/Show'
export default {
  inject:['reload'],
   components: {
    Editor, QuestionShow
  },
  data() {
    return {
      form: {
       id: null,
        questionType: 1,
        gradeLevel: null,
        subjectId: null,
        title: '',
        disabled: false,
        itemOrder: null,
        items: [
          { prefix: 'A', content: '' },
          { prefix: 'B', content: '' },
          { prefix: 'C', content: '' },
          { prefix: 'D', content: '' }
        ],
        analyze: '',
        correct: '',
        score: '',
        difficult: 0
      },
      formLoading: false,
      questionShow: {
        qType: 0,
        dialog: false,
        question: null,
        loading: false
      },
      rules: {
          gradeLevel: [
          { required: true, message: '请选择年级', trigger: 'change' }
        ],
        title: [
          { required: true, message: '请输入题干', trigger: 'blur' }
        ],
        score: [
          { required: true, message: '请输入分数', trigger: 'blur' }
        ],
        correct: [
          { required: true, message: '请选择正确答案', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    let id = this.$route.query.id
    let _this = this
    if (id && parseInt(id) !== 0) {
      _this.formLoading = true
      select(id).then(re => {
        _this.form = re.response
        _this.formLoading = false
      })
    }
  },
  methods: {
      questionItemRemove (index) {
      this.form.items.splice(index, 1)
    },

      questionItemAdd () {
      let items = this.form.items
      let last = items[items.length - 1]
      let newLastPrefix = String.fromCharCode(last.prefix.charCodeAt() + 1)
      items.push({ id: null, prefix: newLastPrefix, content: '' })
    },
      submitForm () {
      let _this = this
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.formLoading = true
          edit(this.form).then(data => {
            if (data.code === 1) {
              _this.$message.success(data.message)
              _this.$router.push('/exam/question/index')
             
            } else {
              _this.$message.error(data.message)
              _this.formLoading = false
            }
          }).catch(e => {
            _this.formLoading = false
          })
        } else {
          return false
        }
      })
    },
     showQuestion () {
      this.questionShow.dialog = true
      this.questionShow.qType = this.form.questionType
      this.questionShow.question = this.form
    },
    resetForm () {
      this.reload()
    }
  }
};
</script>